<template>
  <div>
    <p>vue 收银系统</p>
    <h5>苹果{{ apple }}元/一斤，折扣{{ cnt }}</h5>
    <h5>请输入你要买的斤数 <input type="number" v-model="kg" /></h5>
    <button @click="fn">结账</button>
    <h5>
      结账单 :总价{{ t_price }}元 折后{{ p_price }} 元 节省了{{ c_price }}元
    </h5>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apple: 10, //单价
      cnt: 8, // 折扣
      kg: 0, //斤数
      t_price: 0, //总价
      p_price: 0, // 折后
      c_price: 0, // 节省
    };
  },
  methods: {
    fn() {
      this.t_price = this.apple * this.kg; //总价
      this.p_price = this.apple * this.kg * (this.cnt / 10); // 折后
      this.c_price = this.t_price - this.p_price; // 节省
    },
  },
};
</script>

<style>
</style>